<template>
    <div class="error-404">
        <error-view :code="code" :message="message">
            <div class="return-home" @click="goHome">返回首页</div>
        </error-view>
    </div>
</template>

<script setup>
import ErrorView from './error.vue';
import { useStore } from 'vuex';

const store = useStore();

const code = 404;
const message = '您访问的网址有误';

function goHome() {
    store.dispatch('goHome');
}

</script>

<style lang="scss" scoped>
$primaryColor: var(--el-color-primary);

.error-404 {
    position: relative;
    min-height: 300px;
    background: #fff;

    .go-home {
        line-height: 38px;
        margin-top: 20px;
    }

    .return-home {
        display: block;
        float: left;
        width: 110px;
        height: 36px;
        font-size: 14px;
        line-height: 36px;
        color: #fff;
        text-align: center;
        cursor: pointer;
        background: $primaryColor;
        border-radius: 100px;
        opacity: 0;
        -webkit-animation-delay: .3s;
        animation-delay: .3s;
        -webkit-animation-duration: .5s;
        animation-duration: .5s;
        -webkit-animation-name: slideUp;
        animation-name: slideUp;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }

    @keyframes slideUp {
        0% {
            opacity: 0;
            transform: translateY(60px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
}
</style>
